<template>
  <el-header>
    <div class="toolbar">
      <el-dropdown>
        <el-icon>
          <UserFilled />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="changeTenantVisable = true">Change Tenant</el-dropdown-item>
            <el-dropdown-item @click="loginout">login out</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>{{ username }}</span>
      <span>  currentTenant:{{this.currenttenant?.desc}}</span>
      
    </div>
  </el-header>

  <el-dialog title="Change Tenant" v-model="changeTenantVisable" width="300px">

    <el-form >
      currentTenant:{{this.currenttenant?.desc}}
      <el-form-item label="tenant">
        <el-select v-model="changeToTenant" placeholder="Select tenant">
          <el-option v-for="item in tentant" :key="item.code" :label="item.desc" :value="item.code" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeTenantVisable = false">Cancel</el-button>
        <el-button type="primary" @click="changeTenant()">
          Confirm
        </el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script>
import { loginOutApi } from "@/api/server";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
import { Document, Setting, UserFilled, Menu as IconMenu } from "@element-plus/icons-vue";
import * as storage from '@/util/localstorageutil.js';

export default {
  name: "UserInfo",

  components: {
    UserFilled
  },
  data() {
    return {
      username: '',
      changeTenantVisable: false,
      currenttenant: {
      },
      changeToTenant: '',
      tentant: [],
    }
  },
  mounted() {
    this.initUserInfo();
  },
  methods: {
    loginout() {
      loginOutApi()
        .then((res) => {
          if (res && res.data && res.data.resultCode === 0) {
            this.showMessageError("success", res.data.data)
          } else {
            this.showMessageError("success", res?.data?.resultMessage)
          }
          //清空
          storage.clearForLoginOut();
          this.$router.push("/login")

        })
        .catch((e) => {
          console.log('loginout')
        })
    },
    showMessageError(type, message) {
      ElMessage({
        message: message,
        //warning 、error、success
        type: type,
      });
    },
    initUserInfo() {
      //从登录态获取
      var userinfo = JSON.parse(storage.getItem(storage.LS_USERINFO))
      this.username = userinfo.username;
      this.currenttenant = JSON.parse(storage.getItem(storage.LS_CURRENT_TENANT));
      console.log(this.currenttenant);
      this.tentant = userinfo.tenants;
    },
    changeTenant() {
      this.changeTenantVisable = false;
      
      var userinfo = JSON.parse(storage.getItem(storage.LS_USERINFO))
      var tenants = userinfo.tenants;
      for(var i = 0 ;i<tenants.length;i++){
        if(tenants[i].code === this.changeToTenant){
          storage.setItem(storage.LS_CURRENT_TENANT,tenants[i])
          this.currenttenant = tenants[i];
          break;
        }
      }
      console.log()

    }
  }
}
</script>


<style scoped>
.el-header {
  background-color: var(--el-color-primary-light-7);
}
</style>